<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
    	<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>表单</title>
		<link rel="stylesheet" href="../../css/bootstrap.min.css" />
	</head>
	<body>
		<!--
        	form-control        让表单的宽度为100%，并且还添加了一些其他的样式。
        	form-group          给表单之间添加了距离
        	form-inline         让表单在一行中显示
        	form-horizontal     让表单在一行中显示,并且能够改变form-group的一些样式。
        	control-label       让label里的文字垂直居中对齐
        	checkbox            checkbox样式的设置
        	checkbox-inline     让checkbox在一行中显示
        	radio-inline        让radio在一行总显示
        	multiple            让下拉框中内容出现滚动条
        	textarea            文本输入框，禁止拖动文本输入框设置style="resize: none;"
            has-success         验证通过
            has-warning         验证警告 
            has-error           验证错误
            form-group-lg       框变高
            form-group-md        
            form-group-sm
            form-group-xs
            center-block        块元素居中对齐
        -->
		<div class="container">
			<div class="row">
				<form action="#" class="form-horizontal">
					<div class="form-group has-success has-warning has-error has-error"><!-- 后面会覆盖前面的样式 -->
						<label for="userName" class="col-lg-1 control-label">用户名</label>
						<div class="col-lg-11">
							<input type="text" id="userName" class="form-control"/>
						</div>
					</div>
					<div class="form-group form-group-lg">
						<label for="password" class="col-lg-1 control-label">密码</label>
						<div class="col-lg-11">
							<input type="password" id="password" class="form-control"/>	
						</div>
					</div>
					<div class="form-group">
						<div class="col-lg-1 col-lg-offset-1">
							<div class="checkbox">
								<input type="checkbox" disabled="disabled"/> 记住我
							</div>
						</div>
					</div>
					<div class="form-group">
						<div class="col-lg-1 col-lg-offset-1">
							<div class="checkbox">
								<input type="checkbox" /> 忘记我
							</div>
						</div>
					</div>
					<!-- checkbox在一行中显示 -->
					<div class="form-group">
						<div class="col-lg-11 col-lg-offset-1">
							<div class="checkbox">
								<label class="checkbox-inline">
									<input type="checkbox" /> 忘记我
								</label>
								<label class="checkbox-inline">
									<input type="checkbox" /> 忘记我
								</label>
							</div>
						</div>
					</div>
					<!-- radio在一行中显示  -->
					<div class="form-group">
						<div class="col-lg-11 col-lg-offset-1">
							<div class="radio">
								<label class="radio-inline"><input type="radio" name="names"/>音乐</label>
								<label class="radio-inline"><input type="radio" name="names"/>美术</label>
							</div>
						</div>
					</div>
					<!-- select在一行中显示  -->
					<div class="form-group">
						<div class="col-lg-11 col-lg-offset-1">
							<select multiple class="form-control">
								<option value="">1</option>
								<option value="">2</option>
								<option value="">3</option>
								<option value="">4</option>
								<option value="">5</option>
							</select>
						</div>
					</div>
					<!-- 文本输入框  -->
					<div class="form-group">
						<div class="col-lg-11 col-lg-offset-1">
							<textarea class="form-control" style="resize: none;"></textarea>
						</div>
					</div>
					<div class="form-group">
						<label class="col-lg-1 col-lg-offset-1">
							<input type="button" value="登录" class="btn"/>
						</label>
					</div>
				</form>
			</div>
		</div>
		<script type="text/javascript" src="../../js/jquery-2.1.0.js" ></script>
		<script type="text/javascript" src="../../js/bootstrap.min.js" ></script>
	</body>
</html>
